<template>
  <h1 v-if="isShow">{{ newsContent }}</h1>
  <h1 @click="changeNum">{{ num }}</h1>
<!--  <button @click="fz">修改</button>-->
  <h1>用户 : {{name}}</h1>
  <h1 @click="changeAge">年龄 : {{age}}</h1>
</template>

<script>
import {ref, reactive, toRefs,computed,watchEffect,watch} from 'vue'

export default {
  name: 'App',

  data() {
    console.log('data')
    return {
      newsContent: '振兴中华',
      isShow: true
    }
  },
  methods: {
    changeEdit() {
      this.newsContent = '1111';
      this.isShow = !this.isShow;
    }
  },
  setup() {
    console.log('setup')
    // 将数值字符串等 变成 响应式
    const num = ref(0);
    function changeNum() {
      console.log(num)
      num.value++
    }

    // 创建对象 并转换成 响应式
    const user = reactive({
      name: '小明',
      age: 1,
      fz:computed(()=>{
        return user.age = 1000
      })
    });
    function changeAge(){
      user.age = 100
    }

    watchEffect(()=>{
      console.log(user.age)
      console.log('user.age 发生了改变')
    });

    // 单独监听
    watch(num,(new_data,old_data)=>{
      console.log(new_data,old_data)
      console.log('num发生了改变')
    });

    // 多个监听
    watch([num,user],(new_data,old_data)=>{
      console.log(new_data,old_data)
      console.log('num发生了改变 多个监听')
    });

    // ref 是根本
    // toRefs 解构 成 ref
    return {num, changeNum, ...toRefs(user),changeAge}
  },
  beforeCreate() {
    // 可以在这里发送 请求数据
    console.log('beforeCreate 初始化之前')
  },
  created() {
    // 可以在这里发送 请求数据
    console.log('created 初始化之后')
  },
  beforeMount() {
    console.log('beforeMount 挂载之前')
  },
  mounted() {
    // 可以操作一些页面上的内容
    // 修改动态的对象
    console.log('beforeMount 挂载之后')
  },
  beforeUpdate() {
    console.log('beforeUpdate 更新之前')
  },
  updated() {
    console.log('updated 更新之后')
  }

}
</script>

<style>
.active {
  /*width: 100px;*/
  /*height: 100px;*/
  background-color: yellowgreen;
}

#d2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>